"use client"
import styles from "./links.module.css"
import NavLink from "@/components/navbar/links/navLink/navLink";
import {useState} from "react";
const Links = () => {
  const [open, setOpen] = useState(false);
  const links = [
    {
      title: "HomePage",
      path: "/",
    },
    {
      title: "About",
      path: "/about",
    },
    {
      title: "Contact",
      path: "/contact",
    },{
      title: "Blog",
      path: "/blog",
    }
  ]
  // TEMPORARY
  const session = true;
  const isAdmin = true;
  return (
    <div className={styles.container}>
      <div className={styles.links}>
        {links.map(link => (
          <NavLink key={link.title} item={link}></NavLink>
        ))}{
          session ? (<>{
            isAdmin && <NavLink item={{title: "Admin", path: "/admin"}}></NavLink>}
            <button className={styles.logout}>logout</button>
            </>
          ) : (
            <NavLink item={{title: "Login", path: "/login"}}></NavLink>
          )
      }
      </div>
      <button className={styles.menuButton} onClick={() => {setOpen(!open)}}>Menu</button>
      {
        open && (<div className={styles.mobileLinks}>
          {links.map(link => (
            <NavLink key={link.title} item={link}></NavLink>
          ))}
        </div>)
      }
    </div>
  )
}
export default Links;